<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>019-模拟自动输入效果</title>
    <style></style>
  </head>

  <body>
    <p>
      <a href="./打字机效果demo.html" target="_blank"> typewriter 打字机效果demo </a>
    </p>
    <ul id="app"></ul>
    <script>
      var str = `
    床前明月光，疑是地上霜。
    举头望明月，低头思故乡。
    床前明月光，疑是地上霜。
    举头望明月，低头思故乡。
    床前明月光，疑是地上霜。
    举头望明月，低头思故乡。
    `
      var strList = str.split('。')
      strList.forEach((item) => {
        item = [...item]
      })
      var ul = document.getElementById('app')
      ;(async function () {
        for (let item of strList) {
          var li = document.createElement('li')
          ul.appendChild(li)
          for (let sonItem of item) {
            await sleep()
            li.innerText += sonItem
          }
        }
      })()

      function sleep() {
        return new Promise((a) => {
          setTimeout(() => {
            a()
          }, 100)
        })
      }
    </script>
  </body>
</html>
